<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
    <style>
      .app {
        width: 1000px;
        margin: 0 auto;
        background-color: lightblue;
      }
      .form,
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class App extends React.Component {
        state = {};
        render() {
          const { children } = this.props;
          return (
            <div className="app">
              <div className="form">
                <div className="form-left">{children[0]}</div>
                <div className="form-right">{children[1]}</div>
              </div>
              <hr />
              <div className="list">
                <div className="list-left"></div>
                <div className="list-right"></div>
              </div>
            </div>
          );
        }
      }
      function ComInputText(props) {
        return (
          <div className="form-item">
            <label htmlFor="#">{props.title}: </label>
            <input type="text" placeholder={props.holder} />
          </div>
        );
      }
      function ComInputRadio(props) {
        return (
          <div className="form-item">
            <label htmlFor="#">{props.sex}</label>
            <input
              type="radio"
              defaultChecked={props.checked}
              name="sex"
              value={props.sex}
            />
          </div>
        );
      }
      function ComSelect(props) {
        return <select>{props.children.map((com) => com)}</select>;
      }
      function ComOption(props) {
        return <option value={props.value}>{props.value}</option>;
      }
      class ComForm extends React.Component {
        state = {};
        render() {
          return (
            <div className="form-container">
              <form>
                {this.props.children.map((com) => com)}
                <input type="submit" value="添加" />
              </form>
            </div>
          );
        }
      }
      let app = (
        <App>
          {/*左侧的form：2个输入框、1个单选框*/}
          <ComForm>
            <ComInputText holder="输入姓名" title="姓名" />
            <ComInputText holder="输入年龄" title="年龄" />
            <ComInputRadio sex="男" checked={true} />
            <ComInputRadio sex="女" />
          </ComForm>
          {/*右侧的form：1个输入框、1个单选框、1个下拉框*/}
          <ComForm>
            <ComInputText holder="输入姓名" title="姓名" />
            <br />
            <ComInputRadio sex="教师" checked={true} />
            <ComInputRadio sex="IT" />
            <ComInputRadio sex="公务员" />
            <br />
            <ComSelect>
              <ComOption value="北京市" />
              <ComOption value="郑州市" />
              <ComOption value="南京市" />
              <ComOption value="合肥市" />
            </ComSelect>
          </ComForm>
        </App>
      );
      ReactDOM.render(app, document.getElementById("app"));
    </script>
  </body>
</html>
